// 表单验证功能
//获取表单元素
let formElement = document.querySelector("form");
formElement.onsubmit = function (event) {
    console.log("表单元素个数：" + formElement.elements.length);
    //取出输入域中的value
    let uname = formElement.elements['username'].value;//取属性值
    if (uname == '' || uname.trim().length == 0) {
        alert("请输入用户名");
        return false
    }
    let pwd = formElement.elements["password"].value;
    if (pwd == '' || pwd.trim().length < 6) {
        alert("请正确输入密码");
        return false
    }
    let check_pwd = formElement.check_password.value;
    if (check_pwd != pwd) {
        alert("密码必须保持一致");
        return false
    }
    let email = formElement.email.value;
    let email_reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
    if (email_reg.test(email) && email.trim().length != 0) {
        // alert("邮箱格式正确");
    } else {
        alert("邮箱格式不正确");
        return false
    }
    let hobbies = formElement.hobbies;
    //由于这个hobbies是一个集合元素
    let count = 0;
    for (let i = 0; i < hobbies.length; i++) {
        if (hobbies[i].checked) {
            count++;
            console.log(hobbies[i].value)
        }
    }
    if (count == 0) {
        alert("请最少选择一个爱好");
        return false
    }
    if (count > 2) {
        alert("爱好最多两个");
        return false
    }
    let describe = formElement.describe.value;
    let describe_limit = 50;
    if (describe.length > describe_limit) {
        alert("最多输入50个字符");
        return false
    }
    //如何去获取下拉选择框架的选择项呢？
    let provSelect = formElement.querySelector("#province");
    let citySelect = formElement.querySelector("#city");
    if (provSelect.options[provSelect.selectedIndex].value == -1) {
        alert("没有选择省份");
        return false
    }
    // if (citySelect.options[citySelect.selectedIndex].value == -1){
    if (citySelect.value == -1) {
        alert("没有选择城市");
        return false
    }
    //最后返回
    return true
};

// 父元素中的第一个子元素
// console.log(document.querySelector("button:nth-child(1)"))
formElement.querySelector("button:nth-child(1)").onclick = function (event) {
    //选中hobbies所有的复选框
    //得到所有的hobbies
    let hobbies = formElement["hobbies"];
    //
    for (let i = 0; i < hobbies.length; i++) {
        // hobbies[i].setAttribute("checked",true)
        hobbies[i].checked = true;
    }
};
formElement.querySelector("button:nth-child(2)").onclick = function (event) {
    //不选hobbies所有的复选框
    //得到所有的hobbies
    let hobbies = formElement["hobbies"];
    //
    for (let i = 0; i < hobbies.length; i++) {
        hobbies[i].checked = false;
    }
};
formElement.querySelector("button:nth-child(3)").onclick = function (event) {
    //反选hobbies所有的复选框
    //得到所有的hobbies
    let hobbies = formElement["hobbies"];
    //
    for (let i = 0; i < hobbies.length; i++) {
        //加了逻辑非
        hobbies[i].checked = !hobbies[i].checked
    }
};

// 给下拉选择框添加事件监听
formElement.querySelector("#province").onchange = function (event) {
    //此时此刻的this代表了下拉选择框的province
    //下面两个是一样的
    let proSelect = this;
    //清楚当前所选的下拉元素值
    //获取city select
    let citySelect = formElement.querySelector("#city");
    //根据proSelect的value去加载值
    let cities = getCities(proSelect.value);
    let length = citySelect.options.length;
    //把原来的option项清除掉
    //为什么循环要用length，因为要先把长度保存下来，理由是在循环中删除的话，
    // citySelect.options.length也会相应的减少长度，这样会导致删不干净
    //同时，每移走一次，i会不断的增长，而长度则会不断减少，这样会不可避免的删不干净
    //注意，此处i=1的原因是要保留第一个option
    for (let i = 1; i < length; i++) {
        //这里固定删除1的原因是length是不断减少的，i不需要增加
        citySelect.remove(1);
    }
    // 创建option
    for (let i = 0; i < cities.length; i++) {
        // Option的参数有两个，一个是名字，一个是值
        let opt = new Option(cities[i], cities[i]);
        // alert(opt)
        //添加到citySelect中
        citySelect.add(opt);
    }
};

//
function getCities(province) {
    let cities = [];
    //
    if (province == 1) {
        //江西省
        cities.push("南昌市", "萍乡市", "景德镇", "吉安市", "抚州市")
    } else if (province == 2) {
        //江苏省
        cities.push("南京市", "苏州市", "无锡市", "常州市", "南通市")
    } else if (province == 3) {
        //上海市
        cities.push("普陀区", "徐汇区", "浦东新区", "黄浦区", "嘉定区")
    } else if (province == 4) {
        //广东省
        cities.push("广州市", "惠州市", "东莞市", "梅州市")
    }
    return cities;
}